<template>
<!-- 这里是面包屑导航的代码 -->
  <div class="tabs">
    <el-tag size="small"  v-for = '(tag,index) in tags'
    :key="tag.name"
    :closable= "tag.name !== 'home'"
    :effect="$route.name === tag.name ? 'dark' : 'plain'"
    @click = "changeMenu(tag)"
    @close = "handleClose(tag,index)"
    >
       <!-- 注意以上都是elemenui组件库中的属性 在面包屑导航中需要使用的 -->
    {{tag.label}}
    </el-tag>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex' //引入state 和mutation方法 来对数据进行管理 因为有关数据都存储在上面
export default {
name:'CommonTag',
data()
{
    return{
       
    }
},
methods:{
    ...mapMutations({
        close:'closeTag'  //调用了map方法 找到的是mutations中的clotag
    }),
  changeMenu(item)
  {
   this.$router.push({name:item.name}) //点击事件 最终实现路由跳转的地方
  },
  //一个业务逻辑 对应面包屑路由不同的情况进行的判断 关闭的路由到底是哪个
  handleClose(tag,index)
  {
   
    const length = this.tags.length - 1 //得到进入导航的组件有哪些 调用tab tba是继承了vuex中的tabslist
    //这里的length就是已经开启的路由数量
    this.close(tag) //删除你选中的tag 
    if(tag.name !== this.$route.name){
       return; //如果你删除的不是你当前界面选择的路由一点问题都不会有 继续停留在当前页面
    }
     console.log(index);
     console.log(length)
    if(index === length) //这里的意思是你如果删除的恰好是最后一个路由 碰巧你刚刚好也在哪个路由
    {
        this.$router.push({
            name:this.tags[index - 1 ].name //那么跳转到前一个路由 使用命名路由跳转的
        })
    }else  //这里的意思 目前正好点开了4给路由 
    {
        this.$router.push({
            name:this.tags[index].name   //这里是点卡了多个路由 但是你close当前选择的路由是你在的路由 但是并不是页面的最后一个 是中间的一个默认往后跳 而不是往前和上面的不一样
        })
    }
  }
},
computed:
{
    ...mapState({
        tags:state => state.tab.tabsList //获取到导航栏中到底有哪些组件 
    })
}
}
</script>

<style lang="less" scoped>
.tabs
{
    padding: 20px;
    .el-tag
    {
        margin-right: 15px;
        cursor: pointer;
    }
}
</style>